<template>


  <div >
    <div>
      <div id="main" style="height: 300px;width: 500px"></div>
    </div>

    <div >
      <el-upload
          class="upload-demo"
          action="http://localhost:8100/system/system/import"
          multiple
          :limit="3"
          accept=".xls,.xlsx"
      >
        <el-button @click="getexcel" type="success">导出excel</el-button>
        <el-button @click="getxz" type="success">下载模版</el-button>
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="审批人">
        <el-input v-model="formInline.menuName" placeholder="审批人"></el-input>
      </el-form-item>
      <el-form-item label="菜单状态">
        <el-select v-model="formInline.visible" placeholder="活动区域">
          <el-option label="显示" value="0"></el-option>
          <el-option label="隐藏" value="1"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="list()">查询</el-button>
      </el-form-item>
    </el-form>

    </div>
    <el-button @click="getadd" type="primary">新增</el-button>
    <el-button @click="toggleExpandAll" type="primary">切换展开状态</el-button>
    <el-button @click="getcz" type="primary">重置按钮</el-button>
    <el-button @click="initChart" type="primary">展开折线图</el-button>

    <el-button @click="getexcel" type="success">导入</el-button>
    <el-table

        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        :default-expand-all="isExpandAll"
        v-if="refreshTable"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        coll
    >
        coll>
      <el-table-column
          prop="name"
          label="名称"
          sortable
          width="180">
      </el-table-column>
      <el-table-column
          prop="orderNum"
          label="排序"
          sortable
          width="180">
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间">
      </el-table-column>
      <el-table-column
          prop="path"
          label="地址">
      </el-table-column>
      <el-table-column
          prop="menuType"
          label="类型">
        <template v-slot="s">
          <el-tag v-if="s.row.menuType=='M'">目录</el-tag>
          <el-tag v-if="s.row.menuType=='C'">菜单</el-tag>
          <el-tag v-if="s.row.menuType=='F'">按钮</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="pic"
          label="头像">
       <template v-slot="r">
         <el-image
             style="width: 100px; height: 100px"
             :src="r.row.pic"></el-image>
       </template>
      </el-table-column>
      <el-table-column
          prop="visible"
          label="显示">
        <template v-slot="s">
          <el-tag v-if="s.row.visible==0">显示</el-tag>
          <el-tag v-if="s.row.visible==1">隐藏</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="perms"
          label="权限标识">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="250">
        <template slot-scope="scope">
          <el-button @click="xiugai(scope.row)" type="primary" size="small" class="el-icon-edit" plain>编译</el-button>
          <el-button @click="getadd(scope.row)" type="success" size="small" class="el-icon-edit" plain>新增</el-button>
          <el-button @click="deleteMenu(scope.row.id)" type="danger" size="small" class="el-icon-delete" plain>删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="菜单添加" :visible.sync="dialogFormVisible">
      <el-form  :model="form"  :rules="rules" ref="ruleForm" label-width="80px">
      <el-form-item label="上级菜单" :label-width="formLabelWidth">
        <el-input v-model="menuName"  :value="menuId" @focus="showTree = true"></el-input>
        <el-popover
            ref="treePopover"
            v-model="showTree"
            placement="bottom-start"
            width="300"
            trigger="click">
          <el-tree
              v-if="refreshTable"
              :data="tableData"
              :props="defaultProps"
              :default-expand-all="isExpandAll"
              node-key="id"
              @current-change="handleNodeClick">
          </el-tree>
        </el-popover>
      </el-form-item>
        <el-form-item label="菜单类型" :label-width="formLabelWidth" >
          <el-radio-group v-model="form.menuType">
            <el-radio label="M" >目录</el-radio>
            <el-radio label="C" >菜单</el-radio>
            <el-radio label="F" >按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单名称" :label-width="formLabelWidth" prop="menuName">
          <el-input v-model="form.menuName" :value="menuName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item  v-if="!isDirectorySelected" label="权限标识" >
          <el-input v-model="form.perms" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item  label="显示排序" :label-width="formLabelWidth" prop="orderNum">
          <el-input-number v-model="form.orderNum" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
        </el-form-item>
        <el-form-item  label="路由地址" :label-width="formLabelWidth" v-if="this.form.menuType=='C'">
          <el-input v-model="form.path" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item  label="组件路径" :label-width="formLabelWidth" v-if="this.form.menuType=='C'">
          <el-input v-model="form.component" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item  label="权限字符" :label-width="formLabelWidth" v-if="this.form.menuType=='C'">
          <el-input v-model="form.icon" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item  label="路由参数" :label-width="formLabelWidth" v-if="this.form.menuType=='C'">
          <el-input v-model="form.query" autocomplete="off"></el-input>
        </el-form-item>
        <el-row >
          <el-col :span="12">
            <el-form-item   label="是否缓存" :label-width="formLabelWidth" v-if="this.form.menuType=='C'" >
              <el-radio-group v-model="form.isCache" >
                <el-radio label="0">缓存</el-radio>
                <el-radio label="1">不缓存</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item   label="显示状态" :label-width="formLabelWidth" v-if="this.form.menuType=='C' || this.form.menuType=='M'">
              <el-radio-group v-model="form.visible">
                <el-radio label="0">显示</el-radio>
                <el-radio label="1">隐藏</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item  label="是否外联" :label-width="formLabelWidth">
              <el-radio-group v-model="form.isFrame">
                <el-radio label="0"  >是</el-radio>
                <el-radio label="1"  >否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item   label="菜单状态" :label-width="formLabelWidth">
              <el-radio-group v-model="form.status">
                <el-radio label="0"  >正常</el-radio>
                <el-radio label="1"  >停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

        </el-row>
        <el-upload
            class="avatar-uploader"
            action="http://localhost:8100/system/system/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addMenu('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>



    <el-dialog title="修改" :visible.sync="dialogFormVisible1">
      <el-form :model="form1">
        <el-form-item label="上级菜单" :label-width="formLabelWidth1">
          <el-select v-model="form1.menuName" placeholder="请选择活动区域">
            <el-option :label="menuName"  :value="menuId" ></el-option>
            <el-tree :data="tableData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
          </el-select>
        </el-form-item>

        <el-form-item label="菜单类型" :label-width="formLabelWidth1">
          <el-radio-group v-model="form1.menuType1">
            <el-radio label="M"  >目录</el-radio>
            <el-radio label="C"  >菜单</el-radio>
            <el-radio label="F"  >按钮</el-radio>
          </el-radio-group>
        </el-form-item>


        <el-form-item label="菜单名称" :label-width="formLabelWidth1">
          <el-input v-model="form1.menuName" autocomplete="off"></el-input>
        </el-form-item>


        <el-form-item  v-if="!isDirectorySelected" label="权限标识" :label-width="formLabelWidth1">
          <el-input v-model="form1.perms" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item  label="显示排序" :label-width="formLabelWidth1">
          <el-input-number v-model="form1.orderNum" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
        </el-form-item>

        <el-form-item  label="是否外联" :label-width="formLabelWidth1">
          <el-radio-group v-model="form1.isFrame">
            <el-radio label="0"  >是</el-radio>
            <el-radio label="1"  >否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item  label="路由地址" :label-width="formLabelWidth1">
          <el-input v-model="form1.path" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item  label="组件路径" :label-width="formLabelWidth1">
          <el-input v-model="form1.component" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item  label="权限字符" :label-width="formLabelWidth1">
          <el-input v-model="form1.icon" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item  label="路由参数" :label-width="formLabelWidth1">
          <el-input v-model="form1.query" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item  label="是否缓存" :label-width="formLabelWidth1">
          <el-radio-group v-model="form1.isCache">
            <el-radio label="0"  >缓存</el-radio>
            <el-radio label="1"  >不缓存</el-radio>
          </el-radio-group>
        </el-form-item>



        <el-form-item   label="显示状态" :label-width="formLabelWidth1">
          <el-radio-group v-model="form1.visible">
            <el-radio label="0"  >显示</el-radio>
            <el-radio label="1"  >隐藏</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item   label="菜单状态" :label-width="formLabelWidth1">
          <el-radio-group v-model="form1.status">
            <el-radio label="0"  >正常</el-radio>
            <el-radio label="1"  >停用</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-image
            style="width: 100px; height: 100px"
            :src="this.form1.pic">
        </el-image>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="getxiugai()">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>
<script>


export default {
  name: "MenuView",
  data() {//属性
    return {

      imageUrl:"",
      option: null,
      form1:{},
      showTree:false,
      formLabelWidth1:'120px',
      isDirectorySelected: false,
      dialogFormVisible1:false,
      menus1:[],
      menus:[],
      tableData:[],
      formInline:{

      },
      zxt:[],
      isCollapse: false,
      isExpandAll: false,
      dialogFormVisible:false,
      formLabelWidth: '120px',
      form:{
        status:"0",
        menuType:"M",
        menuName:"",
        menuId:"",
        path:"",
        component:"",
        icon:"",
        query:"",
        isFrame:"0",
        isCache:"0",
        visible:"0",
        orderNum:"",
        perms:"",

      },
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      selectedNodeName:"",
      refreshTable:true,
      menuName:'',
      menuId:'',
      x:[],
      y:[],
      rules: {
        menuName: [
          { required: true, message: '不能为空', trigger: 'blur' },
        ],
        orderNum: [
          { required: true, message: '顺序不能为空', trigger: 'blur' },

        ],
    }

    }
  }, methods: {//自定义方法
    getxz()
    {
       window.location.href="http://localhost:9000/test/menus/menus.xlsx"
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.form.pic=res.data;
      console.log(this.form.pic)
    },
    initChart() {

      this.axios.post("/system/system/gettu").then(res=>{
        this.zxt=res.data.data;
        let xData = [];
        let yData = [];
        this.zxt.forEach(item => {

          xData.push(item.xzhou);
          yData.push(item.yzhou);

          console.log(this.x);
          console.log(this.y);

        });

        this.x = xData;
        this.y= yData;
        var echarts = require('echarts');
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          xAxis: {
            type: 'category',
            data: this.x,
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: this.y,
              type: 'line'
            }
          ]
        };

        console.log(this.x)
        console.log(this.y);

        option && myChart.setOption(option);

      })


  },
    xiugai(scope)
    {


      this.dialogFormVisible1=true;
      this.axios.post("/system/system/getupdateMenu?id="+scope.id).then(res=>{
        this.form1=res.data.data;
        this.menuName=res.data.data.menuName;
      })

    },

    getxiugai(scope)
    {



      this.axios.post("/system/system/updateMenu?id="+scope.id).then(res=>{
        if(res.data.code==200)
        {
          this.$message.success(res.data.msg)
          this.dialogFormVisible1=false;
          this.list();
        }else
        {
          this.$message.error(res.data.msg)
        }

      })
    },
    getcz()
    {
      window.location.reload();
    },
    lang(){
      this.form = {visible: "0", menuType: "F"};
    },
    addMenu(ruleForm)
    {


      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          this.axios.post("/system/system/addMenu",this.form).then(res=>{
            if(res.data.code==200)
            {
              this.$message.success(res.data.msg)
              this.dialogFormVisible=false;

              this.list();
            }else
            {
              this.$message.error(res.data.msg)
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
    handleChange(value) {
      console.log(value);
    },
    getexcel()
    {
      window.location.href=this.axios.defaults.baseURL+"system/system/exportExecel"
    },
    deleteMenu(id)
    {
      this.axios.post("/system/system/deleteMenu?id="+id).then(res=>{
        if(res.data.code==200)
        {
          this.$message.success(res.data.msg)
          this.list();
        }else
        {
          this.$message.error(res.data.msg)
        }
      })
    },
    handleNodeClick(data) {

      console.log(data);
      this.menuName=data.name;
      this.form.parentId=data.id;
      this.showTree=false;

    },
    getxlk()
    {
      this.axios.post("/system/system/list2").then(res=>{
        this.menus1=res.data.data
      })
    },
    getadd()
    {
      this.dialogFormVisible=true


    },
    toggleExpandAll () {
      this.refreshTable=false;
      this.isExpandAll =!this.isExpandAll;  // 点击时切换值
      this.$nextTick(() => {
        this.refreshTable = true;
      });
    },
    toggleExpand(row) {
      row.expanded =!row.expanded;
    },
    getstatus()
    {
      this.axios.post("/system/system/getstatus").then(res=>{
        this.menus=res.data.data
      })
    },
    list()
    {
      this.axios.post("/system/system/list2",this.formInline).then(res=>{
        this.tableData=res.data.data
      })
    }
  }, created() { //钩子函数
    this.list();
    this.getstatus();


  }
}
</script>

<style scoped>

</style>